﻿/*层叠优先级是:
浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式
其中样式表又有:
类选择器 < 类派生选择器 < ID选择器 < ID派生选择器
*/
#dm1{
    background-color:#cccccc;
    background-image:url("../img/00002.png");
    background-repeat:no-repeat;/*设置背景图片的重复平铺填充方式*/
    background-position:100px 30px;
    width:100%;
    height:200px;
}
#dm1 h1{
    color:#ff0000;
}
#dm1 p{
    background-color:#ff9999;
    width:100px;
    text-align:center;
}

#dm1 a:link{
    color:#00ff00;
}
#dm1 a:visited{
    color:#ec4cee;
}
#dm1 a:hover{
    color:#00cc00;
    font-size:22px
}
/*
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
*/

#dm1 ul li{
    list-style-image:url('../img/smlico/gou.png')
}
#dm1 table{
    margin-left:20px;
    margin-top:50px;    
}
#dm1 table,th,td{ /*分组选择器*/
    text-align:center;
    border:1px solid #ff0000;
    border-collapse:collapse; /*消除边框之间的间隔*/
}
#dm1 table td{
    width:70px;
}
.showArea {
    border-style:dashed;
    border-width:1px;
    border-color:#ff0000;
    margin:10px 10px 10px 20px; /*上右下左; margin:25px; 这样则是一次定义了四个,margin:30px 20px;上下是30 左右是20*/
    padding:15px;/*内填充;定义顺序同margin*/
    height:80px;
    overflow-y:scroll;/*当显示区域大于高度时 设置Y轴滚动*/
}
.showArea  span{
    display:block;
    background-color:#ff0000;
    
}
#posDiv1{
    visibility:show;
    background-color:#00ff00;
    width:200px;
    float:left;
    
}
#posDiv2{
    position:relative; /*相对定位;相对于自己当前的位置移动*/
    top:10px;
    left:25px;
    width:200px;
    background-color:#0000ff;
    float:left;
}
#posDiv3{
    position:relative; 
    top:0px;
    left:0px;
    background-color:#00ccff;
    width:200px;
    float:left;
}
#posDiv4{
    position:absolute; /*绝对定位;如果父级有定位相对于父级或者父父级左上角的位置移动;否则相对于html的位置定位*/
    top:100px;
    left:25px;
}
/*
em单位换算公式
1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
h1 {font-size:2.5em;}  40px/16=2.5em 
h2 {font-size:1.875em;}  30px/16=1.875em 
p {font-size:0.875em;}  14px/16=0.875em 

/* vertical-align属性只对inline-block/table-cell元素起作用,而且line-height属性不能少 */

*/
